<template>
  <div class="page">
    <Navbarelder title="我的问题" />
    <van-tabs v-model="activeTab" color="#4B93FE" @change="onRefresh">
      <van-tab title="全部" :name="-1" />
      <van-tab title="受理中" :name="0" />
      <van-tab title="已完成" :name="1" />
      <van-tab title="待受理" :name="2" />
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="record-list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="record-item"
            @click="routerJump(item)"
          >
            <div class="f-r a-c">
              <div class="label-title">
                {{ item.projectName }}
              </div>
              <div class="button1">{{ item.tableName }}</div>
            </div>
            <div class="status status1" :style="{backgroundColor: item.statusColor}">{{ item.statusName }}</div>
            <div class="label">
              问题类型：{{ item.problemName }}
            </div>
            <div class="label">
              问题描述：{{ item.describes }}
            </div>
            <div class="label">
              联系人：{{ item.contactName }} {{ item.contactPhone }}
            </div>
            <div class="label">
              提交时间：{{ item.createTime }}
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_problem } from '@/api'
import { problemType, qsStatus, qsType } from '@/eumn'
import { Toast } from 'vant'
export default {
  name: 'Help',
  mixins: [refresh],
  data() {
    return {
      activeTab: -1,
      tableData: []
    }
  },
  methods: {
    routerJump(item) {
      this.$router.push({
        path: '/qs-detail-elder',
        query: {
          userId: item.userId,
          id: item.id,
          questionstype: item.questionstype,
          vconsole: true
        }
      })
    },
    onRefresh() {
      this.pageNo = 1
      this.getList()
    },
    getList() {
      if (this.pageNo > 1 && this.tableData.length >= this.totalSize) return Toast('没有更多了')
      http_problem.page({
        ...this.getQueryParams(),
        status: this.activeTab === -1 ? undefined : this.activeTab
      }).then(res => {
        if (this.pageNo === 1) {
          this.tableData = res.data.records.map(el => {
            return {
              ...el,
              statusName: qsStatus.getName(el.status),
              problemName: el.tableName === '我的疑问' ? problemType.getName(el.problemType) : qsType.getName(el.ctype)
            }
          })
        } else {
          this.tableData = [
            ...this.tableData,
            ...res.data.records.map(el => {
              return {
                ...el,
                statusName: qsStatus.getName(el.status),
                problemName: el.tableName === '我的疑问' ? problemType.getName(el.problemType) : qsType.getName(el.ctype)
              }
            })
          ]
        }
        this.totalSize = res.data.total
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .van-tab{
  font-size: 18px;
}
.record-list {
    .record-item {
        margin-bottom: 20px;
        border: 1px solid #2B80FF;
        padding: 8px 12px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        position: relative;
        .label-title {
            line-height: 22px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            margin-right: 10px;
            overflow:inherit;
            text-overflow: inherit;
            white-space: inherit;
        }
        .link {
            height: 16px;
            font-size: 16px;
            color: #2F86FD;
        }
        .label {
            height: 16px;
            font-size: 16px;
            color: #333333;
            margin-bottom: 15px;
        }

        .button1 {
            min-width: 50px;
            color: #2B80FF;
            height: 28px;
            background: #D8E8FF;
            border: 1px solid #2F86FD;
            border-radius: 10px;
            text-align: center;
            font-size: 16px;
            line-height: 26px;
            margin-bottom: 15px;
            padding: 0 10px;
        }
        .status {
            width: 50px;
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            color: #fff;
            border-radius: 0px 10px 0px 0px;
            position: absolute;
            right: -1px;
            top: 0;
            text-align:center;
        }
        .status1 {
            background: #4B93FE;
        }
        .status2 {
            background: #20B153;
        }
    }
}
</style>
